<template>
  <div class="product-outsourcing">
    <p class="title">产线外包</p>
    <p class="text-p">生产线承包是指我们的单位租赁客户，招募员工组织生产，最后以计件制度的形式结算服务的生产线。生产外包又称制造外包，是以外加工方式将生产委托给外部优秀的专业化资源，达到降低成本、分散风险、提高效率、增强竞争力的目的。生产外包要遵守有关原则，而且实施生产外包要具备一定的前提条件。</p>
    <div class="product-list">
      <div class="item">
        <div class="item-img">
          <img
            src="../assets/image/生产线外包.png"
          />
        </div>
        <p class="item-p">生产作业外包</p>
      </div>
      <div class="item">
        <div class="item-img">
          <img
            src="../assets/image/物流外包.png"
          />
        </div>
        <p class="item-p">物流仓储外包</p>
      </div>
      <div class="item">
        <div class="item-img">
          <img
            src="../assets/image/岗位外包.png"
          />
        </div>
        <p class="item-p">岗位外包</p>
      </div>
      <div class="item">
        <div class="item-img">
          <img
            src="../assets/image/福利礼物.png"
          />
        </div>
        <p class="item-p">福利管理外包</p>
      </div>
    </div>
    <div class="advantage">
      <p class="title">我们的优势</p>
      <div class="advantage-item">
        <div class="left">
          <div class="advantage-item-img">
            <img
              src="../assets/image/优势1.png"
            />
          </div>
        </div>
        <div class="right">
          <div class="advantage-content">
            <p class="advantage-item-p">集中精力专注于核心业务</p>
            <p class="advantage-item-p">促进业务升级</p>
          </div>
        </div>
      </div>
      <div class="advantage-item">
        <div class="left">
          <div class="advantage-content">
            <p class="advantage-item-p right-p">降低成本</p>
            <p class="advantage-item-p right-p">提高资本回报率</p>
          </div>
        </div>
        <div class="right">
          <div class="advantage-item-img">
            <img
              src="../assets/image/优势2.png"
            />
          </div>
        </div>
      </div>
      <div class="advantage-item">
        <div class="left">
          <div class="advantage-item-img">
            <img
              src="../assets/image/优势3.png"
            />
          </div>
        </div>
        <div class="right">
          <div class="advantage-content">
            <p class="advantage-item-p">避免法律与资质限制</p>
            <p class="advantage-item-p">提高企业活力</p>
          </div>
        </div>
      </div>
      <div class="advantage-item">
        <div class="left">
          <div class="advantage-content">
            <p class="advantage-item-p right-p">避免机构臃肿</p>
            <p class="advantage-item-p right-p">提高企业效率</p>
          </div>
        </div>
        <div class="right">
          <div class="advantage-item-img">
            <img
              src="../assets/image/优势4.png"
            />
          </div>
        </div>
      </div>
      <div class="advantage-item">
        <div class="left">
          <div class="advantage-item-img">
            <img
              src="../assets/image/优势5.png"
            />
          </div>
        </div>
        <div class="right">
          <div class="advantage-content">
            <p class="advantage-item-p">缩减管理幅度</p>
            <p class="advantage-item-p">提高管理效能</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.product-outsourcing {
  width:1200px;
  margin:0 auto;
  height: auto;
  overflow: hidden;
}
.title {
  font-size: 32px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  line-height: 45px;
  margin-top: 60px;
  text-align: center;
}
.text-p {
  width: 100%;
  height: 81px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 27px;
  text-align: center;
  margin: 30px auto;
}
.product-list {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}
.item {
  width: 21%;
  height: 240px;
  margin-left: 2%;
  margin-right: 2%;
  float: left;
}
.item-img {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width:100%;
    height:100%;
  }
}
.item-p {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 30px;
  text-align: center;
  margin-top:15px;
}
.advantage {
  width: 1200px;
  height: auto;
  overflow: hidden;
  margin: 0px auto 60px;
}
.advantage-item {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 30px;
  display: inline-block;
  display: flex;
  align-items: center;
}
.left {
  width: 48%;
  height: auto;
  overflow: hidden;
  float: left;
  margin-right: 2%;
}
.right {
  width: 48%;
  height: auto;
  overflow: hidden;
  float: right;
  margin-left: 2%;
}
.advantage-item-img {
  width: 100%;
  height: auto;
  float: left;
  img{
    width:100%;
    height:auto;
  }
}
.advantage-content {
  width: 100%;
  height: 50px;
  margin-top: 0;
}
.advantage-item-p {
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  line-height: 25px;
}
.right-p {
  text-align: right;
}
@media screen and (max-width: 800px){
  .product-outsourcing{
    width:100%;
    .title{
      margin-top:15px;
      font-size:1.2rem;
      line-height: 1.5;
    }
    .text-p{
      font-size:0.7rem;
      margin:0;
      box-sizing: border-box;
      padding:0 15px;
      width:100%;
      line-height: 1.5;
      height:auto;
      overflow: hidden;
    }
    .product-list{
      margin-top:15px;
      .item{
        width:50%;
        margin:0;
        box-sizing: border-box;
        padding:0 15px;
        height:auto;
        overflow: hidden;
        margin-bottom:15px;
        .item-img{
          width:6rem;
          height:6rem;
        }
        .item-p{
          font-size:1rem;
          margin-top:0.5rem;
        }
      }
    }
    .advantage{
      width:100%;
      margin-bottom:30px;
      .advantage-item{
        margin-top:0.5rem;
        box-sizing: border-box;
        padding:0 15px;
        .left,
        .right{
          .advantage-content{
            .advantage-item-p{
              font-size:0.8rem;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}
</style>

